<template>
	<view class="dingdan">
		<view @click="selectAddress" class="add1" style="align-items: center;padding: 30rpx 20rpx;" v-show="addressinfo.phone==undefined && fleixing==1">
			<view class="xiaoyu">点击添加收货地址</view>
			<view>
				<view class="right">
					<image class="r_img" src="/static/images/right.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view @click="selectAddress" class="add" v-show="addressinfo.phone!=undefined && fleixing==1" style="display: flex;align-items: center;justify-content: space-between;">
			<view class="" style="flex: 1;">
				<view class="" style="display: flex;font-size: 30rpx;color: #3b3b3b;padding: 10rpx 0;">
					<view class="name">{{addressinfo.name}}</view>
					<view class="name" style="margin-left: 30rpx;">{{addressinfo.phone}}</view>
				</view>
				<view class="add1">{{addressinfo.address}}({{addressinfo.addressDetail}})</view>
			</view>
			<image class="r_img" src="/static/images/right.png" mode=""></image>
		</view>
		
		<view class="list" v-show="fleixing==2">
			<view class="l_text" >体验店编号</view>
			<view class="r_box" >
				<input class="input" type="text"  v-model="zbianhao" maxlength="20" />
			</view>
			
		</view>
		<view class="list" v-show="fleixing==2">
			<view class="l_text" >联系人</view>
			<view class="r_box" >
				<input class="input" type="text"  v-model="zname" maxlength="20" />
			</view>
		</view>
		<view class="list" v-show="fleixing==2">
			<view class="l_text" >联系电话</view>
			<view class="r_box" >
				<input class="input" type="text"  v-model="zphone" maxlength="20" />
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background-color: #f7f7f7;"></view>
		<view class="guige" >
			<view class="guigedt"  >快递类型</view>
		</view>
		<view class="guige" >
			<view class="guiged" v-show="logType==1 || logType==3"  @click="navtab(1)"  :class="{'zhong':fleixing==1}">快递</view>
			<view class="guiged" v-show="logType==2 || logType==3"  @click="navtab(2)"  :class="{'zhong':fleixing==2}">自提</view>
		</view>
		<view style="width: 100%;height: 20rpx;background-color: #f7f7f7;"></view>
		<view class="shangpin">
			<view class="top" v-for="item in list" :key="item.id">
				<image class="t_img" :src="item.goodImgSrc" mode=""></image>
				<view class="t_right">
					<view class="name">{{item.goodName}}</view>
					<view class="t_right_bottom">
						<view style="display: flex;">
							<image src="../../static/images/coin.png" class="coin" mode=""></image>
							<view>{{item.price}}</view>
						</view>
						<view class="num">x{{num_way}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="yijian">
			<view class="content">
				<textarea class="textarea" v-model="content" placeholder="请输入备注" placeholder-style="color:#a5a5a5"/>
			</view>
		</view>
		<view class="btn">
			<view class="heji1" @click="showdetailf">合计：
				<text class="text2">{{allprice}}</text>
			</view>
			<view class="pj_btn" @click="isLayer = true">付款</view>
		</view>
		<view class="layer_box" v-show="isLayer">
			<view class='lay_tit' >
				<view class="title1" >
					<view>支付方式</view>
					<view @click="close">关闭</view>
				</view>
				<view class="title"  @click="payType=2;ispLayer = true">
					<image src="../../static/images/coin.jpg" class="coin" mode=""></image><view>余额+积分({{userinfo.userBalance}}+{{userinfo.userCoin}})</view>
				</view>
				<view class="title"  @click="payType=3;ispLayer = true">
					<image src="../../static/images/coin.jpg" class="coin" mode=""></image><view>余额({{userinfo.userBalance}})</view>
				</view>
			</view>
		</view>
		<view class="layer_box_pass" v-show="ispLayer">
			<view class='lay_tit' >
				<view class="title1" >
					<view>支付</view>
					<view @click="closep">关闭</view>
				</view>
				<view class="title">
					<input v-model="pass" type="password" style="width:100%;height: 90rpx;background: #cccccc;padding: 20rpx;">
				</view>
				<view class="title2" >
					<view style="width:100%;" @click="surepass">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				detail:[],
				ids:'',
				num_way:0,
				list:[],//商品
				allnum:0,//总数
				yunum:0,//余额金额
				coinnum:0,//余额金额
				allprice:0,//总价
				addressinfo:[],//收货地址信息
				userinfo:[],
				id:0,
				g_cateid:0,
				content:'',
				ztype:1,//订单类型 1微信 2支付宝 3活力积分 4活力豆
				ggid:0,
				isLayer:false,
				ispLayer:false,
				fleixing:1,//发货类型 1快递 2自提
				pass:'',
				ztitle:'',
				zname:'',
				zphone:'',
				zbianhao:'',//体验店编号
				aid:0,
				logType:0,
				payStr1:false,
				payStr2:false,
				payType:0
			}
		},
		onLoad(options) {
			
			this.userinfo=uni.getStorageSync('user');
			console.log(this.userinfo);
			this.ids=options.ids;
			this.ggid=options.ggid;
			if(options.id){
				this.ids=options.id;
				this.num_way=options.num;
			};
			this.getinfo();
		},
		onShow() {
			uni.setNavigationBarTitle({
			    title: '确认订单'
			});
			var addressinfo=uni.getStorageSync('addressinfo');
			console.log(addressinfo);
			if(addressinfo==''){
				return;
			}else{
				this.addressinfo=addressinfo;
				this.aid = addressinfo.id;
			}
		},
		methods:{
			surepass(){
				if(this.pass==''||this.pass==null||this.pass==undefined){
					uni.showToast({
						icon:'none',
						title:'请输入密码'
					})
					return;
				}
				var that=this;
				this.$http.get('user/erjipass',{'pass':this.pass}).
				then(function (response) {
					if(response.code==-1){
						uni.showToast({
							icon:'none',
							title:response.msg
						})
						return;
					}else{
						that.endpay();
						
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
			closep(){
				this.ispLayer=false;
			},
			navtab(n){
				this.fleixing = n;
			},
			endpay(){
				var that=this;
				var index=this.paytype;
				if(this.fleixing==2){
					if(this.zbianhao==''||this.zbianhao==undefined||this.zbianhao==null){
						uni.showToast({
							icon:'none',
							title:'请填写体验店编号'
						})
						return;
					}
				}else{
					if(this.aid == 0){
						uni.showToast({
							icon:'none',
							title:'请选择收货地址'
						})
						return;
					}
				}
				
				var yunum = 0;
				//余额
				var userallmoney=parseFloat(this.userinfo.userBalance);
				userallmoney = Math.round((userallmoney + Number.EPSILON) * 100) / 100;
				if(userallmoney<parseFloat(this.yunum)){
					uni.showToast({
						icon:'none',
						title:'余额不足'
					})
					return;
				}
				if(this.payType == 2){
					//余额加积分
					var coinnum = 0;
					//积分
					var userallmoney=parseFloat(this.userinfo.userCoin);
					userallmoney = Math.round((userallmoney + Number.EPSILON) * 100) / 100;
					if(userallmoney<parseFloat(this.coinnum)){
						uni.showToast({
							icon:'none',
							title:'积分不足'
						})
						return;
					}
				}
				that.$http.post('order/addOrder',{'id':that.ids,'addressid':that.addressinfo.id,'number':that.allnum,'price':that.allprice,'yunum':this.yunum,'coinnum':that.coinnum,content:that.content,'ggid':that.ggid,'ztitle':that.ztitle,'zname':that.zname,'zphone':that.zphone,'logType':that.fleixing,'zbianhao':that.zbianhao}).
				then(function (response) {
					if(response.code==-1){
						uni.showToast({
							icon:'none',
							title:response.msg
						})
						return;
					}else{
						that.huidiao(response.data);
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
			close(){
				this.isLayer=false;
			},
			huidiao(id){
				var that=this;
				this.$http.get('order/success',{'id':id}).
				then(function (response) {
					if(that.fleixing == 1){
						uni.redirectTo({
						    url: '/pages/wodedingdan/wodedingdan?type=-1'
						});
					}else{
						uni.redirectTo({
						    url: '/pages/zitiorder/zitiorder?type=-1'
						});
					}
					
				}).catch(function (error) {
					console.log(error);
				});
				
				
			},
			showdetailf(){
				this.showdetail=!this.showdetail;
			},
			selectAddress(){
				uni.navigateTo({
					url:'/pages/select_address/select_address?from=1'
				})
			},
			getinfo(){
				var that=this;
				this.$http.get('order/orderset',{
					'ids':that.ids,
					'shuliang':that.num_way,
					'specId':that.ggid
				}).then(function (response) {
					if(response.data.code==-1){
						uni.showToast({
							icon:'none',
							title:response.data.msg
						})
						var clock=setInterval(function(){
							clearInterval(clock);
							uni.navigateBack();
						},1500);
						return;
					}else{
						that.list=response.data.list;
						if(that.aid == ''){
							that.aid = response.data.address.id;
							that.addressinfo = response.data.address;
						}
						that.g_cateid=response.data.cateId;
						that.allnum=response.data.num;
						that.allprice=response.data.allPrice;
						that.yunum = response.data.moneyNum;
						that.coinnum = response.data.coinNum;
						that.yunum = Math.round((that.yunum + Number.EPSILON) * 100) / 100;
						that.coinnum = Math.round((that.coinnum + Number.EPSILON) * 100) / 100;
						that.allprice = Math.round((that.allprice + Number.EPSILON) * 100) / 100;
						that.content='余额：'+that.yunum+'-----积分：'+that.coinnum;
						that.logType = response.data.list[0].logType;
						var payStr = response.data.list[0].payStr;
						if (payStr.indexOf(2) !== -1) {
							that.payStr1 = true;
						}
						if (payStr.indexOf(3) !== -1) {
							that.payStr2 = true;
						}
						if(that.logType == 2){
							that.navtab(2);
						}
						
					}
				}).catch(function (error) {
					console.log(error);
				});
				
			},
			youhui_quan(){
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.coin{
		width:50rpx;
		height:50rpx;
	}
	.dingdan{
		padding-bottom: 200rpx;
		.tanchuang{
			position: fixed;
			background-color: rgba(128,128,128,.8);
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 20;
			.content{
				position: absolute;
				width: 100%;
				// height: 100%;
				bottom: 0;
				left: 0;
				background-color: #FFFFFF;
				border-radius: 10px 10px 0 0;
				.zhifu{
					padding: 0 20rpx;
					color: #454545;
					line-height: 92rpx;
					font-size: 32rpx;
				}
				.c_img{
					position: absolute;
					top: -60rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}
				.list{
					padding: 0 20rpx;
					.list_con{
						.info{
							height:100rpx;
							display: flex;
							justify-content: space-between;
							border-bottom: 1px solid #eeeeee;
							align-items: center;
							padding-left: 50rpx;
							.left{
								height: 100rpx;
								align-items: center;
								display: flex;
								font-size: 30rpx;
								color: #3b3b3b;
								.l_img{
									margin-right: 30rpx;
									width: 32rpx;
									height: 35rpx;
								}
								.l_img1{
									margin-right: 20rpx;
									width: 32rpx;
									height: 34rpx;
								}
							}
						}
					}
					.qd_btn{
						position: relative;
						z-index: 50;
						text-align: center;
						width: 358px;
						height: 49px;
						border-radius: 24px;
						line-height: 49px;
						background-color: #284179;
						color: #ffffff;
						font-size: 17px;
						margin: 100rpx auto 50rpx;
					}
				}
			}
		}
		.file_box{
			display: flex;
			padding-left: 30rpx;
			flex-wrap: wrap;
			.file_btn{
				width: 220rpx;
				height: 220rpx;
				border-radius: 5px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 15rpx;
				margin-bottom: 20rpx;
				.icon{
					display:block;
					width: 220rpx;
					height: 220rpx;
				}
			}
			.file_img{
				width: 220rpx;
				height: 220rpx;
				border-radius: 5px;
				border: 1px solid #e5e5e5;
				box-sizing: border-box;
				position: relative;
				margin-right: 15rpx;
				margin-bottom: 20rpx;
				.imgurl{
					display: block;
					width: 100%;
					height: 100%;
				}
				.delete_box{
					position: absolute;
					top: 0;
					right: 0;
					width: 60rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 2;
					.icon{
						display: block;
						width: 31rpx;
						height: 31rpx;
					}
				}
			}
		}
		.name{
			padding: 30rpx;
			color: #333;
			font-size: 32rpx;
		}
		.list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 1px solid #ebebeb;
			.l_text{
				width: 200rpx;
				font-size: 30rpx;
				color: #454545;
				padding-left: 30rpx;
			}
			.r_box{
				overflow: hidden;
				height: 100%;
				width: 90%;
				align-items: center;
				display: flex;
				font-size: 30rpx;
				color: #a5a5a5;
				.r_img{
					width: 16rpx;
					height: 30rpx;
				}
				.input{
					font-size: 30rpx;
					text-align: left;
					width: 100%;
				}
			}
		}
		.detailtanchuang{
			position: fixed;
			background-color: rgba(128,128,128,.8);
			width: 100%;
			height: 80%;
			left: 0;
			top: 0;
			z-index: 20;
			.content{
				position: fixed;
				width: 100%;
				// height: 100%;
				bottom: 100rpx;
				left: 0;
				background-color: #FFFFFF;
				border-radius: 10px 10px 0 0;
				.zhifu{
					padding: 0 20rpx;
					color: #454545;
					line-height: 92rpx;
					font-size: 32rpx;
				}
				.c_img{
					position: absolute;
					top: -60rpx;
					right: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}
				.list{
					padding: 0 20rpx;
					.list_con{
						.info{
							height:100rpx;
							display: flex;
							justify-content: space-between;
							border-bottom: 1px solid #eeeeee;
							align-items: center;
							padding-left: 50rpx;
							.left{
								height: 100rpx;
								align-items: center;
								display: flex;
								font-size: 30rpx;
								color: #3b3b3b;
								.l_img{
									margin-right: 30rpx;
									width: 32rpx;
									height: 35rpx;
								}
								.l_img1{
									margin-right: 20rpx;
									width: 46rpx;
									height: 38rpx;
								}
							}
						}
					}
					.qd_btn{
						position: relative;
						z-index: 50;
						text-align: center;
						width: 358px;
						height: 49px;
						border-radius: 24px;
						line-height: 49px;
						background-color: #284179;
						color: #ffffff;
						font-size: 17px;
						margin: 100rpx auto 50rpx;
					}
				}
			}
		}
		.r_img{
			width: 18rpx;
			height: 30rpx;
		}
		.add{
			background-color: #FFFFFF;
			padding: 0 20rpx ;
			// display: flex;
			.xiaoyu{
				padding-top: 30rpx;
				font-size: 30rpx;
				color: #000000;
				width: 130rpx;
			}
			.right{
				padding: 30rpx 0 10rpx 0;
				width: 580rpx;
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				.name{
					color: #000000;
				}
				.r_img{
					width: 18rpx;
					height: 30rpx;
				}
			}
			.add1{
				padding-bottom: 20rpx;
				font-size: 30rpx;
				color: #a5a5a5;
			}
		}
		.add1{
			background-color: #FFFFFF;
			display: flex;
			padding: 10rpx 0 20rpx;
			// height: 70rpx;
			align-items: center;
			.xiaoyu{
				font-size: 30rpx;
				color: #C8C7CC;
				width: 100%;
			}
			.right{
				width: 18rpx;
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				.name{
					color: #000000;
				}
				.r_img{
					width: 18rpx;
					height: 30rpx;
				}
			}
			.add1{
				padding-bottom: 20rpx;
				font-size: 30rpx;
				color: #a5a5a5;
			}
		}
		.shangpin{
			margin-top: 20rpx;
			padding: 0 20rpx;
			background-color: #FFFFFF;
			.top{
				padding: 40rpx 0;
				display: flex;
				.t_img{
					width: 250rpx;
					height: 180rpx;
					border-radius: 3px;
				}
				.t_right{
					width: 450rpx;
					margin-left: 20rpx;
					position: relative;
					.name{
						width: 450rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						padding-top: 10rpx;
						font-size: 30rpx;
						color: #000000;
						font-weight: 400;
					}
					.t_right_bottom{
						width: 450rpx;
						position: absolute;
						bottom: 10rpx;
						display: flex;
						justify-content: space-between;
						color: #a5a5a5;
						.text{
							font-size: 26rpx;
						}
						.num{
							color: #a5a5a5;
							font-size: 30rpx;
						}
					} 
				}
			}
			.list1{
				width: 710rpx;
				padding-top: 30rpx;
				display: flex;
				font-size: 30rpx;
				.text{
					padding-top: 20rpx;
					width: 150rpx;
					color: #a5a5a5;
				}
				.input{
					width: 100%;
					border-radius: 3px;
					height: 200rpx;
					padding: 20rpx;
					color: #454545;
					font-size: 30rpx;
					background-color: #e5e5e5;
				}
			}
			.list{
				display: flex;
				justify-content: space-between;
				height: 100rpx;
				align-items: center;
				border-bottom: 1px solid #e5e5e5;
				font-size: 30rpx;
				&:last-child{
					border: none;
				}
				.text{
					// width: 150rpx;
					flex: 2;
					color: #a5a5a5;
				}
				.time{
					flex: 5;
					color: #284179;
					font-size: 30rpx;
				}
				.time1{
					flex: 5;
					color: #454545;
					font-size: 30rpx;
				}
				.l_img_{
					width: 16rpx;
					height: 30rpx;
				}
				.money{
					color: #454545;
					.jine{
						color: #fd3447;
						font-size: 36rpx;
					}
				}
			}
		}
		.btn{
			background-color: #FFFFFF;
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			border-top: 1px solid #e5e5e5;
			.heji1{
				margin-left: 20rpx;
				width: 60%;
				line-height: 100rpx;
				color: #454545;
				font-size: 26rpx;
				.text1{
					color: #ff4848;
					font-size: 26rpx;
				}
				.text2{
					color: #ff4848;
					font-size: 36rpx;
				}
				.detail{
					color: #ff4848;
					font-size: 30rpx;
					float:right;
					margin-right:10rpx;
				}
				.d_img{
					float:right;
					width:40rpx;
					height:30rpx;
					margin:37rpx 10rpx 0 10rpx;
				}
			}
			.pj_btn{
				text-align: center;
				line-height: 54rpx;
				width: 40%;
				height: 100rpx;
				font-size: 32rpx;
				background-color: #284179;
				color: #FFFFFF;
				line-height: 100rpx;
			}
		}
	}
	.yijian{
		padding: 40rpx 30rpx 0;
		.content{
			height: 300rpx;
			border-radius: 5px;
			background-color: #eeeeee;
			.textarea{
				display: block;
				padding: 35rpx 30rpx 0;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				font-size: 30rpx;
			}
		}
		.qd_btn {
			width: 650rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			background: #f64e4e;
			font-size: 36rpx;
			color: #fff;
			margin: 200rpx auto 0;
			border-radius: 45rpx;
		}
	}
.layer_box{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	.lay_tit{
		width: 100%;
		height: 400rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		.title{
			display: flex;
			flex-wrap: nowrap;
			height:150rpx;
			line-height: 150rpx;
			border-bottom: 2rpx solid #988f8f;
			padding-left: 20rpx;
			font-size: 35rpx;
			.coin{
				margin: auto 0;
				width:100rpx;
				height:100rpx;
			}
		}
		.title1{
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			border-bottom: 2px solid #988f8f;
		}
	}
	.lay_tit1{
		height: 400rpx;
	}
	.lay_tit2{
		height: 250rpx;
	}
}
.layer_box_pass{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	.lay_tit{
		width: 80%;
		height: 350rpx;
		background: #ffffff;
		position: fixed;
		bottom: 50%;
		border-radius: 10rpx;
		.title{
			display: flex;
			flex-wrap: nowrap;
			height:130rpx;
			line-height: 130rpx;
			font-size: 35rpx;
			.coin{
				margin: auto 0;
				width:100rpx;
				height:100rpx;
			}
		}
		.title1{
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			border-bottom: 2px solid #988f8f;
		}
		.title2{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			text-align: center;
		}
	}
	.lay_tit1{
		height: 250rpx;
	}
}
.guige{
		background: #ffffff;
		display: flex;
		flex-wrap: wrap;
		.guiged{
			width: 100px;
			text-align: center;
			border: 1px solid #000000;
			border-radius: 5px;
			height: 30px;
			line-height: 30px;
			margin: 10px;
		}
		.guigedt{
			width: 100px;
			text-align: center;
			border-radius: 5px;
			height: 30px;
			line-height: 30px;
			margin: 10px 10px 10px 0;
		}
		.zhong{
			border: 1px solid #284179;
			color:#284179;
		}
	}
.tip{
	color:red;
}
</style>
